<!--侧边栏菜单组件-->
<template>
<div >
    <el-menu
  :collapse="iscollapse"
  class="el-menu-vertical-demo"
  background-color="#545c64"
  text-color="#fff"
  active-text-color="#FF9900"
  :collapse-transition="false"
  :router="true"
  :default-active="$route.path">

<h3>{{  iscollapse ? '后台' : 'vue2通用后台系统'  }}</h3>
  
  <el-menu-item v-for="(item, index) in noChildren" :key="item.name" :index="'' + item.path" @click="muenClick(item)">
    <i :class="'el-icon-' + item.icon"></i>
    <span slot="title">{{ item.label }}</span>
  </el-menu-item>
  <el-submenu v-for="(item, index) in hasChildren" :key="item.label" :index="'' + item.path">
    <template slot="title">
      <i :class="'el-icon-' + item.icon"></i>
      <span>{{ item.label }}</span>
    </template>
    
      <el-menu-item v-for="(item1, index1) in item.children" :key="item1.name" :index="'' + item1.path" @click="muenClick(item1)">{{ item1.label }}</el-menu-item>
    
  </el-submenu>
</el-menu>
</div>
</template>

<script>
import { mapState,mapMutations } from "vuex"
export default {
    data() {
        return {
            
        }
    },
    created(){
       console.log(this.menuDate)
    },
    computed: {
        ...mapState('my-tab', ['iscollapse','menu']),
        //菜单栏数据
        menuDate(){
         return this.menu
        },
        //没有子菜单
        noChildren() {
            return this.menuDate.filter(item => !item.children)
        },
        //有子菜单
        hasChildren() {
            return this.menuDate.filter(item => item.children)
        }
    },
    methods: {
        ...mapMutations('my-tab',['updateMune']),
        //向tab.js里的updateMune传值
        muenClick(item){
      this.updateMune(item)
        }
    }
}
</script>

<style lang="less" scoped>
h3 {
    color: #fff;
    font-size: 18px;
    font-weight: normal;
    text-align: center;
    margin-top: 10px
}
</style>